<template>
  <div class="zviewmode">
    <el-row v-if="!topStatus" class="topstatus">
      <el-button v-for="(item,index) in defaultStatus" :key="index" :type="item.type" @click="triggerStatus(item)">
        {{ item.text }}
      </el-button>
    </el-row>
    <el-row v-else class="topstatus">
      <el-button v-for="(item,index) in topStatus" :key="index" :size="item.size"
                 :style="{backgroundColor:item.color}"
                 style="color: #FFFFFF;font-weight: bold;min-width: 70px"
                 @click="triggerStatus(item)">
        {{ item.text }}
      </el-button>
    </el-row>
    <el-row :gutter="gutter">
      <el-col v-for="(item,index) in modeList" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12"
              style="margin-bottom: 10px">
        <el-card :body-style="{padding: '0px 10px'}" :style="{borderColor:item.statuscolor || item[props.statuscolor]}"
                 class="box-card"
                 shadow="hover">
          <div slot="header" class="clearfix z-line-1">
            <div :style="{borderTopColor: item.statuscolor || item[props.statuscolor]}" class="rightstatus"></div>
            <div class="rightstatustitle">{{ item.statusTitle || item[props.statusTitle] }}</div>
            <span :style="{color:item.statuscolor || item[props.statuscolor]}"
                  class="code">{{ item.code || item[props.code] }}.</span>
            <el-tooltip :content="item.title"
                        effect="dark"
                        placement="top">
              <span :style="{color:item.statuscolor || item[props.statuscolor]}"
                    class="title">{{ item.title || item[props.title] }}</span>
            </el-tooltip>

          </div>
          <div class="content">
            <div class="middle">
              <slot v-bind="{item, index}" name="content"></slot>
            </div>
            <div class="footer-icon">
              <div class="footer-left">
                <el-tooltip v-for="(item2,index2) in iconOptions || iconOptionsDefault" :key="index2"
                            :content="item2.tooltip"
                            effect="dark"
                            placement="top">
                  <i :class="item2.icon" :style="{color:item.statuscolor || item[props.statuscolor]}"
                     @click="triggerIcons(item2, item)"></i>
                </el-tooltip>
              </div>
              <div v-if="otherIconOptions && otherIconOptions.length" class="footer-right">
                <el-popover
                    placement="left-start"
                    trigger="hover"
                    width="80">
                  <div v-for="(item3,index3) in otherIconOptions" :key="index3" class="moreicon"
                       @click="triggerIcons(item3, item)">
                    <i :class="item3.icon" style="font-size: 12px"></i>
                    <span style="padding-left: 5px;font-size: 12px">{{ item3.tooltip }}</span>
                  </div>
                  <i slot="reference" :style="{color:item.statuscolor || item[props.statuscolor]}"
                     class="el-icon-more"></i>
                </el-popover>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="pagination" style="text-align: right">
      <el-pagination
          :current-change="currentChange"
          :current-page="pagination.page"
          :page-size="pagination.size"
          :total="modeList.length"
          background
          layout="prev, pager, next,total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ZViewMode",
  props: {
    props: {
      type: Object,
      default() {
        return {}
      }
    },
    pagination: {
      type: Object,
      default: null
    },
    gutter: {
      type: Number,
      default: 10
    },
    span: {
      type: Number,
      default: 4
    },
    topStatus: {
      type: Array,
      default: () => null
    },

    modeList: {
      type: Array,
      default: () => []
    },
    iconOptions: {
      type: Array,
      default: () => null
    },
    otherIconOptions: {
      type: Array,
      default: () => null
    }
  },
  data() {
    return {
      defaultStatus: [
        {
          type: 'primary',
          text: '完结'
        },
        {
          type: 'success',
          text: '正常'
        },
        {
          type: 'info',
          text: '初始'
        },
        {
          type: 'warning',
          text: '预警'
        },
        {
          type: 'danger',
          text: '异常'
        },
      ],
      options: {
        title: "卡片名称",//卡片名称
      },
      iconOptionsDefault: [
        {
          icon: 'el-icon-plus',
          tooltip: '编辑'
        },
        {
          icon: 'el-icon-s-promotion',
          tooltip: '转发'
        }, {
          icon: 'el-icon-s-tools',
          tooltip: '设置'
        }, {
          icon: 'el-icon-share',
          tooltip: '分享'
        },
      ]
    }
  },
  methods: {
    //触发顶部状态按钮
    triggerStatus(item) {
      this.$emit('triggerStatus', item)
    },
    //触发底部定义的icon
    triggerIcons(item, row) {
      this.$emit('triggerIcons', item, row)
    },
    //分页
    currentChange(page) {
      this.$emit('currentChange', page)

    }

  }
}
</script>

<style scoped>
.zviewmode {
  padding: 20px;
  background-color: #e8f0ff;
}

.zviewmode .topstatus {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #FFFFFF;
}

.zviewmode .box-card {
  position: relative;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  cursor: pointer;
}

.zviewmode .box-card  :deep(.el-card__header) {
  padding: 6px;
}


.zviewmode .box-card .content {
  display: flex;
  flex-direction: column;
}

.zviewmode .box-card .middle {
  width: 100%;
  margin: 5px 0;
}

.zviewmode .box-card .content .footer-icon {
  width: 100%;
  height: 28px;
  border-top: 1px solid #e1e1e1;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
}

.el-popover .moreicon {
  margin: 4px 0;
  padding: 2px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-popover .moreicon:hover {
  background-color: #ededed;
}

.zviewmode .box-card .content .footer-icon i {
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
}

.zviewmode .box-card .rightstatus {
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 38px solid #e1e1e1;
  border-left: 38px solid transparent;
  position: absolute;
}

.zviewmode .box-card .rightstatustitle {
  font-size: 12px;
  position: absolute;
  right: -4px;
  top: 5px;
  transform: rotate(45deg);
  color: #FFFFFF;
  font-weight: bold;
}


.zviewmode .box-card {
  border-bottom-width: 6px;
}

.zviewmode  :deep(.box-card .el-card__header) {
  /*border-bottom: 1px solid #e1e1e1;*/
}


.zviewmode  :deep(.el-card.is-hover-shadow:hover) {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
}

.zviewmode  :deep(.box-card .clearfix .code) {
  font-size: 18px;
  font-weight: bold;
}

.zviewmode  :deep(.box-card .clearfix .title) {
  padding-left: 2px;
  font-size: 15px;
  font-weight: 600;
}

</style>
